<template>
  <div style="height:93vh;background-color: #f6f6f6;left:0;right:0;z-index:9999;overflow: scroll;"
       class="po_fi">
    <div class="top fx-1 fx-items-center fx-between">
      <div>
        {{isPoint?'景点':'景区'}}概况
      </div>
      <img src="../../assets/icon/cha.png"
           @click="$emit('close')">
    </div>
    <audio id="myaudio"
           ref="music"
           preload
           @timeupdate="onTimeupdate"
           @ended="audioEnd"></audio>
    <div v-if="isPoint"
         class="abstract">
      <div class="box fx-items-center"
           v-if="pointInfo.media_url">

        <div class="fx-1  fx-column">
          <div class="weight-700 size-16">
            {{pointInfo.name}}
          </div>
          <div class="fx-items-center size-14 m-t-10">
            <div class="time">
              {{currentDuration}}
            </div>
            <div class="progress-bar-wrapper">
              <div class="progress-bar"
                   ref="progressBar">
                <div class="bar-inner">
                  <div class="progress"
                       ref="progress"></div>
                  <div class="progress-btn-wrapper"
                       ref="progressBtn">
                    <div class="progress-btn"></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="time">
              {{musicDuration}}
            </div>
          </div>
        </div>
        <!--头像区域-->
        <div class="headPortrait-panel1">
          <!--加载层-->
          <div class="load-panel "
               :style="[{backgroundImage: 'url(' + musicImg || '../../assets/image/xiaotu@3x.png' + ' )'}]"
               :class="isPlay? 'loadWhirl' :''">
            <!--头像显示层-->
            <div class="headPortrait-img-panel "
                 :class="isPlay? 'avatarRotation' :''">
              <img v-if="isPlay"
                   src="../../assets/icon/bofang.png"
                   @click="playMusic(false)" />
              <img v-if="!isPlay"
                   src="../../assets/icon/zant.png"
                   @click="playMusic(true)" />
            </div>
          </div>
        </div>

      </div>

    </div>
    <div class="abstract"
         v-if="!isPoint">
      <div class="po_re box"
           v-if="info.audit_arr && info.audit_arr.length !== 0">
        <div class="fx-items-center">
          <div class="weight-700 size-16">
            {{info.name}}
          </div>
          <div class="label"
               v-for="(item,index) in info.label_arr"
               :key="index">
            {{item.name}}
          </div>
        </div>
        <!--头像区域-->
        <div class="headPortrait-panel">
          <!--加载层-->
          <div class="load-panel "
               :style="[{backgroundImage: 'url(' + musicImg || '../../assets/image/xiaotu@3x.png' + ' )'}]"
               :class="isPlay? 'loadWhirl' :''">
            <!--头像显示层-->
            <div class="headPortrait-img-panel "
                 :class="isPlay? 'avatarRotation' :''">
              <img v-if="isPlay"
                   src="../../assets/icon/bofang.png"
                   @click="playMusic(false)" />
              <img v-if="!isPlay"
                   src="../../assets/icon/zant.png"
                   @click="playMusic(true)" />
            </div>
          </div>
        </div>
        <div class="fx-items-center size-14 m-t-10">
          <div class="time">
            {{currentDuration}}
          </div>
          <div class="progress-bar-wrapper">
            <div class="progress-bar"
                 ref="progressBar">
              <div class="bar-inner">
                <div class="progress"
                     ref="progress"></div>
                <div class="progress-btn-wrapper"
                     ref="progressBtn">
                  <div class="progress-btn"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="time">
            {{musicDuration}}
          </div>
        </div>

        <div class="fx-column m-t-15">
          <div class="fx-items-center introduce">
            <img src="../../assets/icon/dizhi.png">
            <div>
              {{info.address}}
            </div>
          </div>
          <div class="fx-items-center introduce">
            <img src="../../assets/icon/shijian.png">
            <div>
              非周末({{info.work_day_start}}~{{info.work_day_end}}); 周末({{info.rest_day_start}}~{{info.rest_day_end}})
            </div>
          </div>
          <div class="fx-items-center introduce">
            <img src="../../assets/icon/dianhua.png">
            <div>
              {{info.phonenum}}
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="introduction">
      {{isPoint?'景点':'景区'}}简介
    </div>
    <div class="content-box">
      <div v-if="isPoint"
           class="html"
           v-html="pointInfo.intro">

      </div>
      <div v-if="!isPoint"
           class="html"
           v-html="info.content_html">

      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'scenicDetails',
  components: {},
  props: {
    info: {
      type: Object,
      default: function () {
        return {
          media_url: '',
        };
      },
    },
    pointInfo: {
      type: Object,
      default: function () {
        return {
          media_url: '',
          intro: ''
        };
      },
    },
    isPoint: {
      type: Boolean,
      default: false,
    },
  },
  data () {
    return {
      music: null,
      isPlay: false,
      currentTime: 0, //播放秒数
      second: 0, //总时长秒数
      percent: 0,
      currentDuration: '00:00',
      musicDuration: '00:00',
      musicImg: '',
    };
  },
  mounted () {
    console.log(JSON.stringify(this.info));
    console.log(this.isPoint);
    if (this.isPoint) {
      if (this.pointInfo.media_url) {
        this.musicImg = this.pointInfo.img[0];
        //初始化音频
        this.music = document.getElementById('myaudio');
        this.music.src = this.pointInfo.media_url[0];
        this.music.pause();
        this.music.addEventListener('canplay', () => {
          //监听audio是否加载完毕，如果加载完毕，则读取audio播放时间
          this.second = this.music.duration;
          //分钟
          var minute = this.second / 60;
          var minutes = parseInt(minute);
          if (minutes < 10) {
            minutes = '0' + minutes;
          }
          //秒
          var second = this.second % 60;
          var seconds = Math.round(second);
          if (seconds < 10) {
            seconds = '0' + seconds;
          }
          this.musicDuration = `${minutes}:${seconds}`;
        });
      }
    } else {
      if (this.info.audit_arr && this.info.audit_arr.length !== 0) {
        this.info.label_arr = this.info.label_arr.reverse();
        this.musicImg = this.info.img_arr[0];
        //初始化音频
        this.music = document.getElementById('myaudio');
        this.music.src = this.info.audit_arr[0];
        this.music.pause();
        this.music.addEventListener('canplay', () => {
          //监听audio是否加载完毕，如果加载完毕，则读取audio播放时间
          this.second = this.music.duration;
          //分钟
          var minute = this.second / 60;
          var minutes = parseInt(minute);
          if (minutes < 10) {
            minutes = '0' + minutes;
          }
          //秒
          var second = this.second % 60;
          var seconds = Math.round(second);
          if (seconds < 10) {
            seconds = '0' + seconds;
          }
          this.musicDuration = `${minutes}:${seconds}`;
        });
      }
    }
  },
  watch: {
    //进度条变化
    percent (val) {
      let value = parseInt(val * 100) + '%';
      this.$refs.progress.style.width = value;
      this.$refs.progressBtn.style.left = parseInt(val * 100 - 5) + '%';
    },
    currentTime (val) {
      this.handle(val);
    },
  },
  methods: {
    playMusic (bool) {
      this.isPlay = bool;

      if (bool) {
        this.music.play();
      } else {
        this.music.pause();
      }
    },
    audioEnd () {
      this.isPlay = false;
    },
    onTimeupdate (e) {
      this.currentTime = parseInt(e.target.currentTime);
    },
    //处理
    handle (val) {
      //分钟
      var minute = val / 60;
      var minutes = parseInt(minute);
      if (minutes < 10) {
        minutes = '0' + minutes;
      }
      //秒
      var second = val % 60;
      var seconds = Math.round(second);
      if (seconds < 10) {
        seconds = '0' + seconds;
      }
      this.currentDuration = `${minutes}:${seconds}`;
      this.percent = val / this.second;
    },
  },
};
</script>

<style scoped>
.top {
	padding: 0.483092rem 0.338164rem 0rem 0.338164rem;
	font-size: 0.386473rem;
	color: #333333;
}
.top img {
	width: 0.241546rem;
	height: 0.241546rem;
}

.progress-bar-wrapper {
	width: 50%;
	margin-right: 6px;
	margin-left: 6px;
}
.progress-bar {
	height: 30px;
	cursor: pointer;
}
.bar-inner {
	position: relative;
	top: 13px;
	height: 2px;
	background: #c8dbff;
}
.progress {
	position: absolute;
	height: 100%;
	background-color: #bc99ff;
}
.progress-btn-wrapper {
	position: absolute;
	left: -8px;
	top: -13px;
	width: 30px;
	height: 30px;
}
.progress-btn {
	position: relative;
	top: 9px;
	left: 7px;
	box-sizing: border-box;
	width: 10px;
	height: 10px;
	box-shadow: 0px 0px 3px 0px rgba(105, 153, 243, 0.28);
	border-radius: 50%;
	background: #6999f3;
}
.introduce {
	color: #565656;
	font-size: 0.338164rem;
	margin-top: 8px;
}
.introduce img {
	width: 13px;
	height: 12px;
	margin-right: 5px;
}

.abstract {
	padding: 0.483092rem 0.338164rem;
}

.box {
	padding: 0.555556rem 0.338164rem;
	background: #fff;
	border-radius: 0.144928rem;
}

.label {
	padding: 0.048309rem 0.193237rem;
	font-size: 0.2657rem;
	border: 1px solid #2e75ff;
	color: #2e75ff;
	border-radius: 0.2657rem;
	margin-left: 0.144928rem;
}

.audio-box {
	top: 0.362319rem;
	right: 0.338164rem;
	width: 1.594203rem;
	height: 1.594203rem;
	border-radius: 50%;
}

.audio-button {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 0.966184rem;
	height: 0.966184rem;
}

.introduction {
	padding: 0 20px;
	color: #333333;
	font-size: 18px;
	font-weight: 700;
}

.content-box {
	padding: .386473rem .338164rem;
}
.html {
	padding:  .289855rem;
	background: #ffffff;
	border-radius: 6px;
	box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);
}
.html >>> img {
	width: 100%;
}
.html >>> p {
    margin: 0;
    font-size: 12pt;
}
/*头像区域*/
.headPortrait-panel {
	width: 1.594203rem;
	height: 1.594203rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0.362319rem;
	right: 0.338164rem;
}
.headPortrait-panel1 {
	width: 1.594203rem;
	height: 1.594203rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
/*加载层*/
.load-panel {
	width: 1.594203rem;
	height: 1.594203rem;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;

	background-position: center;
	background-size: 1.594203rem 1.594203rem;
}

.load-panel img {
	width: 100%;
	height: 100%;
}
.avatarRotation {
	animation: internalAvatar 3s linear;
	animation-iteration-count: infinite;
}
/*头像显示层*/
.headPortrait-img-panel {
	border-radius: 50%;
	overflow: hidden;
	border: solid 1px #ebeced;
	width: 1.594203rem;
	height: 1.594203rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.headPortrait-img-panel img {
	width: 0.966184rem;
	height: 0.966184rem;
}

.loadWhirl {
	animation: externalHalo 3s linear;
	animation-iteration-count: infinite;
}

@keyframes externalHalo {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(90deg);
	}
	50% {
		transform: rotate(180deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes internalAvatar {
	0% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(-90deg);
	}
	50% {
		transform: rotate(-180deg);
	}
	100% {
		transform: rotate(-360deg);
	}
}
</style>